<template>
	<div style="margin: 20px;">
        <div>
            <Row style="margin-bottom: 25px;">
                <Col span="8">搜索内容：
                    <Input v-model="commuitSearch" style="width: 204px" placeholder="请输入搜索内容"/>
                </Col>
                <Col span="8"><Button type="primary" shape="circle" icon="ios-search" @click="search()">搜索</Button></Col>
            </Row>
        </div>            
        <div>
            <ul>
                <li>
                    <Button type="primary" icon="plus-round" @click="openNewModal()">新建</Button>
                    <Button type="success" icon="wrench" @click="openModifyModal()">修改</Button>
                    <Button type="error" icon="trash-a" @click="del()">删除</Button>
                </li>
                <li>
                    <div style="padding: 10px 0;">
                    	<Table border :columns="columns1" :data="data1" :height="400" @on-selection-change="s=>{change(s)}" @on-row-dblclick="s=>{dblclick(s)}"></Table>
                    </div> 
                </li>
                <li>
                    <div style="text-align: right;">
                        <Page :total="total" :page-size="pageInfo.pageSize" show-elevator show-total @on-change="e=>{pageSearch(e)}"></Page>
                    </div>  
                </li>
            </ul>
        </div>
        <!--添加modal-->  
        <Modal :mask-closable="false" :visible.sync="newModal" :loading = "loading" v-model="newModal" width="600" title="新建" @on-ok="newOk('commuitAdd')">
            <Form ref="commuitAdd" :model="commuitAdd" :rules="ruleNew" :label-width="80" >
                <Row>
                    <Col span="12">
                        <Form-item label="小区名称:" prop="projectName">
                            <Input v-model="commuitAdd.projectName" style="width: 204px" placeholder="请输入小区名称"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="小区编码:" prop="villageCode">
                            <Input v-model="commuitAdd.villageCode" style="width: 204px" placeholder="请输入小区编码"/>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                   <Col span="24">
                        <Form-item label="选择省市:" prop="addressDetail">
                            <area-select type='text' :placeholders="placeholders" :level='2' v-model="send_search_form.selected" :data="pcaa">
                            </area-select>
                        </Form-item> 
                    </Col>
                </Row>
                <!-- <Row>
                    <Col span="12">
                    <Form-item label="区域编码:" prop="districtCode">
                        <Input v-model="commuitAdd.districtCode" style="width: 204px"/>
                    </Form-item>
                    </Col>
                    <Col span="12">
                    <Form-item label="街道编码:" prop="streetCode">
                        <Input v-model="commuitAdd.streetCode" style="width: 204px"/>
                    </Form-item>
                    </Col>
                </Row> -->
                <Row>
                    <!-- <Col span="12">
                    <Form-item label="道路编码:" prop="roadCode">
                        <Input v-model="commuitAdd.roadCode" style="width: 204px"/>
                    </Form-item>
                    </Col> -->
                    <Col span="12">
                    <Form-item label="详细地址:" prop="addressDetail">
                        <Input v-model="commuitAdd.addressDetail" style="width: 204px"/>
                    </Form-item>
                    </Col>
                    <Col span="12">
                    <Form-item label="所属派出所:" prop="policeStation">
                        <Input v-model="commuitAdd.policeStation" style="width: 204px"/>
                    </Form-item>
                    </Col>
                </Row>
                <Row>    
                    <!-- <Col span="12">
                    <Form-item label="经度:" prop="lon">
                        <Input v-model="commuitAdd.lon" style="width: 204px"/>
                    </Form-item>
                    </Col> -->
                    <!-- <Col span="12">
                    <Form-item label="小区实景图片:" prop="picUrl">
                        <Input v-model="commuitAdd.picUrl" style="width: 204px"/>
                    </Form-item>
                    </Col> -->
                    <Col span="12">
                    <Form-item label="楼栋数:" prop="buildingNum">
                        <Input v-model="commuitAdd.buildingNum" style="width: 204px"/>
                    </Form-item>
                    </Col>
                    <Col span="12">
                    <Form-item label="房屋数:" prop="houseNum">
                        <Input v-model="commuitAdd.houseNum" style="width: 204px"/>
                    </Form-item>
                    </Col>
                </Row>
                <!-- <Row>
                    <Col span="12">
                    <Form-item label="纬度:" prop="lat">
                        <Input v-model="commuitAdd.lat" style="width: 204px"/>
                    </Form-item>
                    </Col>   
                </Row> -->
                <!-- <Row>
                    <Col span="12">
                    <Form-item label="小区平面图:" prop="image1">
                        <Input v-model="commuitAdd.image1" style="width: 204px"/>
                    </Form-item>
                    </Col>          
                </Row> -->
                <Row>
                    <Col span="12">
                    <Form-item label="居民数:" prop="residentNum">
                        <Input v-model="commuitAdd.residentNum" style="width: 204px"/>
                    </Form-item>
                    </Col>
                </Row>
            </Form>
        </Modal>
        <!--修改modal-->
        <Modal :mask-closable="false" :visible.sync="modifyModal" :loading = "loading" v-model="modifyModal" width="600" title="修改" @on-ok="modifyOk('commuitModify')">
            <Form ref="commuitModify" :model="commuitModify" :rules="ruleNew" :label-width="80" >
                <Row>
                    <Col span="12">
                        <Form-item label="小区名称:" prop="projectName">
                            <Input v-model="commuitModify.projectName" style="width: 204px" placeholder="请输入小区ID"/>
                        </Form-item>
                    </Col>
                    <Col span="12">
                        <Form-item label="小区编码:" prop="villageCode">
                            <Input v-model="commuitModify.villageCode" style="width: 204px" placeholder="请输入小区编码"/>
                        </Form-item>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <Form-item label="选择省市:" prop="addressDetail">
                            <area-select type='text' :placeholders="placeholdersModify" :level='2' v-model="send_search_form.selected" :data="pcaa">
                            </area-select>
                        </Form-item> 
                    </Col>
                </Row>
                <!-- <Row>
                    <Col span="12">
                    <Form-item label="区域编码:" prop="districtCode">
                        <Input v-model="commuitModify.districtCode" style="width: 204px"/>
                    </Form-item>
                    </Col>
                    <Col span="12">
                    <Form-item label="街道编码:" prop="streetCode">
                        <Input v-model="commuitModify.streetCode" style="width: 204px"/>
                    </Form-item>
                    </Col>
                </Row> -->
                <Row>
                    <!-- <Col span="12">
                    <Form-item label="道路编码:" prop="roadCode">
                        <Input v-model="commuitModify.roadCode" style="width: 204px"/>
                    </Form-item>
                    </Col> -->
                    <Col span="12">
                    <Form-item label="详细地址:" prop="addressDetail">
                        <Input v-model="commuitModify.addressDetail" style="width: 204px"/>
                    </Form-item>
                    </Col>
                     <Col span="12">
                    <Form-item label="所属派出所:" prop="policeStation">
                        <Input v-model="commuitModify.policeStation" style="width: 204px"/>
                    </Form-item>
                    </Col>
                </Row>
                <!-- <Row>        
                    <Col span="12">
                    <Form-item label="经度:" prop="lon">
                        <Input v-model="commuitModify.lon" style="width: 204px"/>
                    </Form-item>
                    </Col>
                </Row> -->
                <!-- <Row>
                    <Col span="12">
                    <Form-item label="纬度:" prop="lat">
                        <Input v-model="commuitModify.lat" style="width: 204px"/>
                    </Form-item>
                    </Col>
                    <Col span="12">
                    <Form-item label="小区实景图片:" prop="picUrl">
                        <Input v-model="commuitModify.picUrl" style="width: 204px"/>
                    </Form-item>
                    </Col>
                </Row> -->
                <Row>
                    <!-- <Col span="12">
                    <Form-item label="小区平面图:" prop="image1">
                        <Input v-model="commuitModify.image1" style="width: 204px"/>
                    </Form-item>
                    </Col> -->
                    <Col span="12">
                    <Form-item label="楼栋数:" prop="buildingNum">
                        <Input v-model="commuitModify.buildingNum" style="width: 204px"/>
                    </Form-item>
                    </Col>
                    <Col span="12">
                    <Form-item label="房屋数:" prop="houseNum">
                        <Input v-model="commuitModify.houseNum" style="width: 204px"/>
                    </Form-item>
                    </Col>
                </Row>
                <Row>   
                    <Col span="12">
                    <Form-item label="居民数:" prop="residentNum">
                        <Input v-model="commuitModify.residentNum" style="width: 204px"/>
                    </Form-item>
                    </Col>
                </Row>
            </Form>
        </Modal>     
    </div>
</template>
<script>
    import { AreaSelect } from "vue-area-linkage";
    import AreaData from "area-data";
    import { pca, pcaa } from "area-data";
	export default {
        component: {
            AreaSelect: AreaSelect
        },
        data () {
            return {
                /*用于查找的菜单id*/
                commuitSearch:null,
            	/*选择的数量*/
                count:null,
            	/*选中的组数据*/
                groupId:null,
            	/*新建modal的显示参数*/
                newModal:false,
                /*修改modal的显示参数*/
                modifyModal:false,
            	/*分页total属性绑定值*/
                total:0,
                /*loading*/
                loading: true,
                /*pageInfo实体*/
                pageInfo:{
                	page:0,
                	pageSize:10
                },
                //省市联动
                pca: pca,
                pcaa: pcaa,
                placeholders: [],
                placeholdersModify: ['北京市','市辖区','门头沟区'],
                send_search_form: {
                    orderCode: "",
                    itemName: "",
                    orderTime: [],
                    consigneeName: "",
                    state: "",
                    selected: []
                },
                //小区名称
                projectName:null,
                /*楼栋管理数据*/
                commuitData:{
                    id:null,
                    villageCode:null,
                    projectName:null,
                    province:null,
                    city:null,
                    districtCode:null,
                    streetCode:null,
                    roadCode:null,
                    addressDetail:null,
                    policeStation:null,
                    lon:null,
                    lat:null,
                    alt:null,
                    picUrl:null,
                    image1:null,
                    buildingNum:null,
                    houseNum:null,
                    residentNum:null,
                },
                /*用于添加的楼栋数据*/
                commuitAdd:{
                    id:null,
                    villageCode:null,
                    projectName:null,
                    province:null,
                    city:null,
                    districtCode:null,
                    streetCode:null,
                    roadCode:null,
                    addressDetail:null,
                    policeStation:null,
                    lon:null,
                    lat:null,
                    alt:null,
                    picUrl:null,
                    image1:null,
                    buildingNum:null,
                    houseNum:null,
                    residentNum:null,
                },
                /*用于修改的楼栋数据*/
                commuitModify:{
                    id:null,
                    villageCode:null,
                    projectName:null,
                    province:null,
                    city:null,
                    districtCode:null,
                    streetCode:null,
                    roadCode:null,
                    addressDetail:null,
                    policeStation:null,
                    lon:null,
                    lat:null,
                    alt:null,
                    picUrl:null,
                    image1:null,
                    buildingNum:null,
                    houseNum:null,
                    residentNum:null,
                },
                /*新建验证*/
                ruleNew:{
                    projectName: [
                        { type:'string',required: true, message: '输入小区名称', trigger: 'blur' }
                    ],
                    villageCode: [
                        { type:'string',required: true, message: '请输入正确的数字编码', trigger: 'blur' }
                    ],
                    addressDetail: [
                        { type:'string',required: true, message: '请输入详细地址', trigger: 'blur' }
                    ]
                },
                /*修改验证*/
                ruleModify:{
                    householdName: [
                        { type:'string',required: true, message: '请输入住户名称', trigger: 'blur' }
                    ],
                    villageCode: [
                        { type:'string',required: true, message: '请输入正确的数字编码', trigger: 'blur' }
                    ],
                    addressDetail: [
                        { type:'string',required: true, message: '请输入详细地址', trigger: 'blur' }
                    ]
                },
                /*菜单列表*/
                householdList:[],
            	/*生产类型表显示字段*/
            	columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '小区ID',
                        key: 'id'
                    },
                    {
                        title: '小区名称',
                        key: 'projectName'
                    },
                    {
                        title: '省份',
                        key: 'province',
                    },
                    {
                        title: '城市',
                        key: 'city'
                    },
                    {
                        title: '详细地址',
                        key: 'addressDetail'
                    },
                    {
                        title: '经度',
                        key: 'lon'
                    },
                    {
                        title: '纬度',
                        key: 'lat'
                    },
                    {
                        title: '房屋数',
                        key: 'houseNum'
                    },
                    {
                        title: '居民数',
                        key: 'residentNum'
                    }
                ],
                /*生产类型表数据*/
                data1: [],
                /*上传图片定义*/
                defaultList: [
                    {
                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
                    },
                    {
                        'name': 'bc7521e033abdd1e92222d733590f104',
                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
                    }
                ],
                imgName: '',
                visible: false,
                uploadList: []
            }
        },
        mounted(){
        	/*页面初始化调用方法*/
            this.getTable({
                "pageInfo":this.pageInfo,
                'projectName':this.projectName
            });
        },
        methods:{
        	/*pageInfo实体初始化*/
        	initPageInfo(){
        		this.pageInfo.page = 0;
        		this.pageInfo.pageSize = 10;
        	},
            /*初始化楼栋信息*/
            initCommunit(){
                this.commuitData.id = null;
                this.commuitData.villageCode = null,
                this.commuitData.projectName=null,
                this.commuitData.province=null,
                this.commuitData.city=null,
                this.commuitData.districtCode=null,
                this.commuitData.streetCode=null,
                this.commuitData.roadCode=null,
                this.commuitData.addressDetail=null,
                this.commuitData.policeStation=null,
                this.commuitData.lon=null,
                this.commuitData.lat=null,
                this.commuitData.alt=null,
                this.commuitData.picUrl=null,
                this.commuitData.image1=null,
                this.commuitData.buildingNum=null,
                this.commuitData.houseNum=null,
                this.commuitData.residentNum=null
            },
            /*新增楼栋信息*/
            initCommuitNew(){
                this.commuitAdd.id = null;
                this.commuitAdd.villageCode= null,
                this.commuitAdd.projectName=null,
                this.commuitAdd.province=null,
                this.commuitAdd.city=null,
                this.commuitAdd.districtCode=null,
                this.commuitAdd.streetCode=null,
                this.commuitAdd.roadCode=null,
                this.commuitAdd.addressDetail=null,
                this.commuitAdd.policeStation=null,
                this.commuitAdd.lon=null,
                this.commuitAdd.lat=null,
                this.commuitAdd.alt=null,
                this.commuitAdd.picUrl=null,
                this.commuitAdd.image1=null,
                this.commuitAdd.buildingNum=null,
                this.commuitAdd.houseNum=null,
                this.commuitAdd.residentNum=null
            },
            /*修改楼栋信息*/
            initCommunitModify(){
                this.commuitModify.id = null;
                this.commuitModify.villageCode = null,
                this.commuitModify.projectName=null,
                this.commuitModify.province=null,
                this.commuitModify.city=null,
                this.commuitModify.districtCode=null,
                this.commuitModify.streetCode=null,
                this.commuitModify.roadCode=null,
                this.commuitModify.addressDetail=null,
                this.commuitModify.policeStation=null,
                this.commuitModify.lon=null,
                this.commuitModify.lat=null,
                this.commuitModify.alt=null,
                this.commuitModify.picUrl=null,
                this.commuitModify.image1=null,
                this.commuitModify.buildingNum=null,
                this.commuitModify.houseNum=null,
                this.commuitModify.residentNum=null
            },
            /*楼栋新增设置*/
            communitSet(e){
                this.commuitData.id = e.id;
                this.commuitData.villageCode = e.villageCode,
                this.commuitData.projectName= e.projectName,
                this.commuitData.province= e.province,
                this.commuitData.city= e.city,
                this.commuitData.districtCode= e.districtCode,
                this.commuitData.streetCode= e.streetCode,
                this.commuitData.roadCode= e.roadCode,
                this.commuitData.addressDetail= e.addressDetail,
                this.commuitData.policeStation= e.policeStation,
                this.commuitData.lon=e.lon,
                this.commuitData.lat= e.lat,
                this.commuitData.alt= e.alt,
                this.commuitData.picUrl= e.picUrl,
                this.commuitData.image1= e.image1,
                this.commuitData.buildingNum= e.buildingNum,
                this.commuitData.houseNum= e.houseNum,
                this.commuitData.residentNum=e.residentNum
            },
            /*楼栋新增设置*/
            commuitNewAdd(e){
                this.commuitAdd.id = e.id;
                this.commuitAdd.villageCode = e.villageCode,
                this.commuitAdd.projectName= e.projectName,
                this.commuitAdd.province= e.province,
                this.commuitAdd.city= e.city,
                this.commuitAdd.districtCode= e.districtCode,
                this.commuitAdd.streetCode= e.streetCode,
                this.commuitAdd.roadCode= e.roadCode,
                this.commuitAdd.addressDetail= e.addressDetail,
                this.commuitAdd.policeStation= e.policeStation,
                this.commuitAdd.lon=e.lon,
                this.commuitAdd.lat= e.lat,
                this.commuitAdd.alt= e.alt,
                this.commuitAdd.picUrl= e.picUrl,
                this.commuitAdd.image1= e.image1,
                this.commuitAdd.buildingNum= e.buildingNum,
                this.commuitAdd.houseNum= e.houseNum,
                this.commuitAdd.residentNum=e.residentNum
            },
            /*楼栋修改设置*/
            communitModifySet(e){
                this.commuitModify.id = e.id;
                this.commuitModify.villageCode = e.villageCode,
                this.commuitModify.projectName= e.projectName,
                this.commuitModify.province= e.province,
                this.commuitModify.city= e.city,
                this.commuitModify.districtCode= e.districtCode,
                this.commuitModify.streetCode= e.streetCode,
                this.commuitModify.roadCode= e.roadCode,
                this.commuitModify.addressDetail= e.addressDetail,
                this.commuitModify.policeStation= e.policeStation,
                this.commuitModify.lon=e.lon,
                this.commuitModify.lat= e.lat,
                this.commuitModify.alt= e.alt,
                this.commuitModify.picUrl= e.picUrl,
                this.commuitModify.image1= e.image1,
                this.commuitModify.buildingNum= e.buildingNum,
                this.commuitModify.houseNum= e.houseNum,
                this.commuitModify.residentNum=e.residentNum
                console.log('test',this.placeholdersModify)
            },
            /*得到表数据*/
            getTable(e) {
                console.log(this.commuitSearch);
                this.axios({
                  method: 'get',
                  url: '/residences',
                  params: {
                    'page':e.pageInfo.page,
                    'pageSize':e.pageInfo.pageSize,
                    'projectName':this.commuitSearch
                  }
                }).then(function (response) {
                    console.log(response)
                    this.data1=response.data.data;
                    this.total=response.data.totalCount;
                }.bind(this)).catch(function (error) {
                  //alert(error);
                });
            },
            /*搜索按钮点击事件*/
            search(){
                this.initPageInfo();
                this.getTable({
                    "pageInfo":this.pageInfo,
                    'projectName':this.commuitSearch,
                });   
            },
            /*分页点击事件*/
            pageSearch(e){
                this.pageInfo.page = e-1;
                this.getTable({  
                    "pageInfo":this.pageInfo,
                    'projectName':this.commuitSearch
                });
            },
            /*新建点击触发事件*/
            openNewModal(){
                this.newModal = true;
                this.initCommuitNew();
                this.data1.sort();
                this.count = 0;
                this.groupId = null;
            },
            /*新建modal的newOk点击事件*/
            newOk (commuitAdd) {
                this.commuitAdd.province = this.send_search_form.selected[0];
                this.commuitAdd.city = this.send_search_form.selected[1];
                console.log(this.send_search_form.selected);
                this.$refs[commuitAdd].validate((valid) => {
                    if (valid) {
                        this.initCommunit();
                        this.commuitNewAdd(this.commuitAdd);
                        this.axios({
                            method: 'post',
                            url: '/residences/residence',
                            data: this.commuitAdd
                        }).then(function (response) {
                            this.initCommuitNew();
                            this.getTable({
                                "pageInfo":this.pageInfo,
                                'projectName':this.commuitSearch
                            });
                            this.$Message.info('新建成功');
                        }.bind(this)).catch(function (error) {
                            //alert(error);
                        });  
                        this.newModal = false;
                    }else {
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 1000);
                    }
                });
            },
            /*点击修改时判断是否只选择一个*/
            openModifyModal(){
                if(this.count > 1 || this.count < 1){
                    this.modifyModal= false; 
                    this.$Message.warning('请至少选择一项(且只能选择一项)');  
                }else{
                    this.modifyModal = true;
                }
            },
            /*修改modal的modifyOk点击事件*/
            modifyOk (commuitModify) {
                this.commuitModify.province = this.send_search_form.selected[0];
                this.commuitModify.city = this.send_search_form.selected[1];
                console.log(this.send_search_form.selected);
                this.$refs[commuitModify].validate((valid) => {
                    if (valid) {
                        this.initCommunit();
                        this.communitModifySet(this.commuitModify);
                        this.axios({
                          method: 'put',
                          url: '/residences/'+this.commuitModify.id,
                          data: this.commuitModify
                        }).then(function (response) {
                            this.initCommunitModify();
                            this.getTable({
                                "pageInfo":this.pageInfo,
                                'projectName':this.commuitSearch
                            });
                            this.$Message.info('修改成功');
                        }.bind(this)).catch(function (error) {
                          //alert(error);
                        });  
                        this.modifyModal = false;
                    }else {
                        this.$Message.error('表单验证失败!');
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 1000);
                    }
                });
            },
            /*modal的cancel点击事件*/
            // cancel () {
            //     this.$Message.info('点击了取消');
            // },
            /*table选择后触发事件*/
            change(e){
                if(e.length==1){
                    this.communitModifySet(e['0']);
                }
                this.setGroupId(e);              
            },
            /*通过选中的行设置groupId的值*/
            setGroupId(e){
                this.groupId=[];
                this.count=e.length;
                for (var i = 0; i <= e.length - 1; i++) {
                    this.groupId.push(e[i].id);
                }
            },
            /*删除table中选中的数据*/
            del(){
                if(this.groupId!=null && this.groupId!=""){
                    this.axios({
                      method: 'delete',
                      url: '/residences',
                      data: this.groupId
                    }).then(function (response) {
                        this.getTable({
                            "pageInfo":this.pageInfo,
                            'projectName':this.commuitSearch
                        });
                        this.groupId=null;
                        this.count=0;
                        this.$Message.info('删除成功');
                    }.bind(this)).catch(function (error) {
                        //alert(error);
                    });
                }
            },
            /*表格中双击事件*/
            dblclick(e){
                this.communitModifySet(e);
                this.modifyModal = true;
                this.data1.sort();
            },
            /*图片上传 start */
            handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: 'Up to five pictures can be uploaded.'
                    });
                }
                return check;
            }
        }
    }
</script>

<style>

    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .area-select .area-selected-trigger{
        padding-top: 0 !important;
    }
    .area-select-wrap .area-select{
        margin-left: 0 !important;
    }

</style>